import React from 'react';
import MUtil from 'util/mm.jsx';
import Product from 'service/product-service.jsx';

import PageTitle from 'component/page-title/index.jsx';

const __mm = new MUtil();
const __product = new Product();

class CategoryAdd extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      categoryList  : [],
      parentId      : 0,
      categoryName  : ''
    };
  }

  // 调用 loadCategoryList 的生命函数
  componentDidMount() {
    this.loadCategoryList();
  }

  // 加载品类列表, 显示父品类列表
  loadCategoryList() {
    __product.getCategoryList().then(res => {
      this.setState({
        categoryList: res
      })
    }, errMsg => {
      __mm.errorTips(errMsg);
    });
  }

  // 这里是表单的值发生变化
  onValueChange(e){
    let name = e.target.name,
        value = e.target.value;
    this.setState({
      [name] : value
    });
  }

  // 提交
  onSubmit(e){
    let categoryName = this.state.categoryName.trim();
    // 如果商品品类名称 不为空
    if(categoryName){
      __product.saveCategory({
        parentId      : this.state.parentId,
        categoryName  : categoryName
      }).then(res => {
        __mm.successTips(res);
        this.props.history.push('/product-category/index');
      }, errMsg => {
        __mm.errorTips(errMsg)
      });
    }
    // 否则提示错误
    else{
      __mm.errTips('请输入品类名称')
    }
  }

  // new Data(user.createTime).toLocaleString() 这就将其转化为了当地的一个时间
  render() {

    return (
      <div id="page-wrapper">
        <PageTitle title="品类列表" />
        <div className="row">
          <div className="col-md-12">
            <div className="form-horizontal">
              <div className="form-group">
                <label className="col-md-2 control-label">所属品类</label>
                <div className="col-md-5">
                  <select
                    name="parentId"
                    className="form-control"
                    onChange={(e) => this.onValueChange(e)}
                  >
                    <option value="0">根品类/</option>
                    {
                      this.state.categoryList.map((category, index) => {
                        return <option value={category.id} key={index}>根品类/{category.name}</option>
                      })
                    }
                  </select>
                </div>
              </div>
              <div className="form-group">
                <label className="col-md-2 control-label">品类名称</label>
                <div className="col-md-5">
                  <input
                    type="text"
                    className="form-control"
                    placeholder="请输入品类名称"
                    name="categoryName"
                    onChange={(e) => this.onValueChange(e)}
                  />
                </div>
              </div>
              <div className="form-group">
                <div className="col-md-offset-2 col-md-10">
                  <button
                    type="submit"
                    className="btn btn-primary"
                    onClick={(e) => {this.onSubmit(e)}}
                  >
                    提交
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default CategoryAdd;